<template>
  <div class="contain">
    <!-- 工作动态 -->
    <div class="model">
      <ul>
        <li v-for="(item, index) in list" :key="index" class="list-items">
          <router-link
            :to="'/educationIndex/eduWorkAction-eduArticleDetail/' + index"
          >
            <span>{{ item.title }}</span>
            <span>{{ item.time }}</span>
          </router-link>
        </li>
      </ul>
      <div class="page">
        <el-pagination
          :page-sizes="[10, 20, 50, 100]"
          :current-page="pageCurrent"
          @current-change="currentChange"
          @prev-click="prevClick"
          @next-click="nextClick"
          @size-change="handleSizeChange"
          background
          layout="sizes,prev, pager, next"
          :page-size="pageSize"
          :total="1000"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageCurrent: 1,
      pageSize: 10,
      total: 1000,
      list: [
        {
          time: "2020-05-10",
          title: "经开区推动思政课建设内涵式发展"
        },
        {
          time: "2020-05-10",
          title: "经开区推动思政课建设内涵式发展"
        },
        {
          time: "2020-05-10",
          title: "经开区推动思政课建设内涵式发展"
        }
      ]
    };
  },
  methods: {
    currentChange(val) {
      this.pageCurrent = val;
    },
    prevClick(val) {
      this.pageCurrent = val;
    },
    nextClick(val) {
      this.pageCurrent = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.contain {
  background-color: #fff;
  .model {
    padding: 45px 0 90px 0;
    width: 1600px;
    margin: 0 auto;
    ul {
      li.list-items {
        margin-bottom: 36px;
        font-size: 22px;
        color: #333;
        a {
          display: flex;
          justify-content: space-between;
          font-size: inherit;
          color: inherit;
          position: relative;
          padding-left: 32px;
          span {
            transition: 0.3s;
            &:last-child {
              color: #999999;
            }
          }
          &::before {
            transition: 0.3s;
            content: " ";
            display: block;
            width: 10px;
            height: 10px;
            position: absolute;
            border-radius: 50%;
            background-color: #eaeaea;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
          &:hover {
            span {
              color: $font-color;
            }
            &::before {
              background-color: $font-color;
            }
          }
        }
      }
    }
    .page {
      text-align: center;
    }
  }
}
</style>
